.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.content {
  width: 100%;
  height: 100%;
}

.toolWrapper {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateX(-50%);

  .content {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 46px;
    padding: 8px;
    background: #fff;
    border: 1px solid #dee0e7;
    border-radius: 8px;
    box-shadow: 0 3px 12px 0 #101e381a;

    :global {
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        cursor: pointer;
        border-radius: 4px;

        .anticon {
          font-size: 20px;
          color: #81818b;
        }

        &:hover {
          background: rgba(221, 223, 226, 0.248);
        }

        &.active {
          background: var(--sr-editor-hover-bg, rgba(4, 84, 242, 0.08));

          .anticon {
            color: #1e2940;
          }
        }
      }

      .ant-select {
        &:not(.ant-select-disabled):hover {
          .ant-select-selector {
            border-color: var(--sr-editor-brand-color, #0454f2) !important;
          }
        }

        &.ant-select-focused:not(.ant-select-disabled).ant-select:not(
            .ant-select-customize-input
          ) {
          .ant-select-selector {
            border-color: var(--sr-editor-brand-color, #0454f2) !important;
            box-shadow: none;
          }
        }
      }
    }
  }
}
